<template>
	<div class="app-container">
		<jk-operation-card ref="box1" class="margin-bottom-10">
			<div class="flex-between-center-wrap">
				<div class=""></div>
				<div class="flex-end-center-wrap">
					<jk-select v-model="searchParams.processCode" value-key-name="code" :option-list="processList" placeholder="工序" class="search-bar-item-size margin-5-0 item-gap"></jk-select>
					<jk-search-button @click="onSearchBtn"></jk-search-button>
				</div>
			</div>
		</jk-operation-card>
		<jk-card v-for="(table, index) in tableList" :key="index" class="margin-bottom-10">
			<jk-table
				:ref="'tableRef' + index"
				:loading="tableLoading"
				border
				:stripe="false"
				:data="table.data"
				:height="500"
			>
				<vxe-column
					v-for="(item, i) in table.columns"
					:key="i"
					:title="item.title"
					:align="item.align"
					:field="item.key"
					:width="item.width"
				>
				</vxe-column>
			</jk-table>
		</jk-card>
	</div>
</template>

<script>
    import calHeight from '@/mixins/cal-table-height';
    import getMenuColumn from '@/mixins/getMenuColumn';
    import handlerCache from '@/mixins/handler-cache';
    import { collectionDataListByProcess } from '@/api/technology/process';
    export default {
        name: 'YarnProcessesSheet',
        mixins: [calHeight, getMenuColumn, handlerCache],
        data() {
            return {
                apiItem: {
                    page: collectionDataListByProcess
                },
                tableList: [],
                tableLoading: true,
                processList: [],
                searchParams: {
                    processCode: 'XS'
                }
            };
        },
        mounted() {
            this.getDependentData();
        },
        methods: {
            async getDependentData() {
                // 过滤出 code 值为 ['XS', 'MB', 'CS', 'SM'] 的项
                this.processList = this.$store.state.user.userProcess.processList.filter((item) => ['XS', 'MB', 'CS', 'SM'].includes(item.code));
                await this.getListRequest();
            },
            formatTableColumns(header = []) {
                if (!header || !Array.isArray(header)) return [];
                return header.map(x => ({
                    title: x.value,
                    key: x.key,
                    align: x.align || 'right',
                    width: x.width || '150'
                }));
            },
            async getListRequest() {
                this.tableLoading = true;
                this.tableList = [];
                try {
                    const res = await this.apiItem.page(this.searchParams);
                    if (res.data.status === 200 && Array.isArray(res.data.res)) {
                        this.tableList = (res.data.res || []).map(item => {
                            const header = Array.isArray(item.tableHeader) ? item.tableHeader : [];
                            const data = Array.isArray(item.tableData) ? item.tableData : [];
                            return {
                                columns: this.formatTableColumns(header || []),
                                data
                            };
                        });
                    }
                } catch (error) {
                    console.error('请求失败:', error);
                } finally {
                    this.tableLoading = false;
                }
            },
            onSearchBtn() {
                this.searchParams.pageNo = 1;
                this.searchParams.count = 1;
                this.getListRequest();
            }
        }
    };

</script>
